import React, { Component,useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

import Header from '../components/header/index';
import LeftMenu from '../components/menu/index';

import axios from 'axios';

import { Input, message } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { withTranslation,useTranslation } from 'react-i18next';

import AllTypeSvg from '../img/allType.svg';
import steelSvg from '../img/steel.svg';
import lightIndustrySvg from '../img/lightIndustry.svg';
import nonferrousSvg from '../img/nonferrous.svg';
import electronSvg from '../img/electron.svg';
import petrifactionSvg from '../img/petrifaction.svg';
import carSvg from '../img/car.svg';
import chemicalIndustrySvg from '../img/chemicalIndustry.svg';
import buildingMaterialsSvg from '../img/buildingMaterials.svg';
import powerSvg from '../img/power.svg';
import machinerySvg from '../img/machinery.svg';

import CardDefaultPng from '../img/cardDefault.png';
import CardDefaultPng1 from '../img/cardDefault1.png';
import RunSvg from '../img/run.svg';
import appIcon from '@/pages/waxberryAi/img/appIcon.png';
import LargeModelPng from '@/pages/waxberryAi/components/menu/img/largeModel.png';
import intelligence  from '@/pages/waxberryAi/img/intelligence.png';
import smallModuleImg from '@/pages/waxberryAi/img/smallModuleIcon.png';
import RankingList from './rankingList.jsx'
import './waxberryMarket.scss';
const MarketIcon=({width,height})=><svg  version="1.1" width={width} height={height} viewBox="0 0 18 18"><defs><clipPath id="master_svg0_280_29827/385_77512"><rect x="0" y="0" width="18" height="18" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_280_29827/385_77512)"><g><path d="M8.99999875,0.8555145263671875C13.49806875,0.8555145263671875,17.14456875,4.502024526367188,17.14456875,9.000044526367187C17.14456875,13.498114526367187,13.49806875,17.14461452636719,8.99999875,17.14461452636719C4.50197875,17.14461452636719,0.85546875,13.498114526367187,0.85546875,9.000044526367187C0.85546875,4.502024526367188,4.50197875,0.8555145263671875,8.99999875,0.8555145263671875ZM11.84736875,5.110424526367187L7.70501875,6.601684526367188C7.19113875,6.786734526367187,6.78658875,7.191354526367188,6.60163875,7.705264526367188L5.11037875,11.847414526367187C5.00341875,12.144214526367188,5.07757875,12.476214526367187,5.30071875,12.699314526367187C5.52384875,12.922514526367188,5.85578875,12.996614526367187,6.15266875,12.889714526367188L10.29497875,11.398414526367187C10.80885875,11.213314526367187,11.21336875,10.808734526367187,11.39836875,10.294824526367188L12.88966875,6.152714526367188C12.99656875,5.855834526367188,12.92246875,5.5238945263671875,12.69926875,5.300754526367188C12.47616875,5.077624526367187,12.14416875,5.003464526367187,11.84736875,5.110424526367187ZM8.99999875,10.018114526367187C9.56225875,10.018114526367187,10.01806875,9.562304526367187,10.01806875,9.000044526367187C10.01806875,8.437784526367189,9.56225875,7.981984526367188,8.99999875,7.981974526367187C8.437738750000001,7.981984526367188,7.98193875,8.437784526367189,7.98193875,9.000044526367187C7.98193875,9.562304526367187,8.437738750000001,10.018114526367187,8.99999875,10.018114526367187Z" fill="currentColor" /></g></g></svg>
const TrophyIcon=({width,height})=><svg version="1.1" width={width} height={height} viewBox="0 0 24 24"><defs><clipPath id="master_svg0_640_78198"><rect x="0" y="0" width="24" height="24" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_640_78198)"><g><path d="M7.41164,1.599853515625L17.2174,1.599853515625C19.0226,1.599853515625,20.4859,2.948763515625,20.4859,4.612593515625L20.4859,4.742673515625L21.4286,4.742673515625C22.296,4.742673515625,23,5.417133515625,23,6.248733515625L23,9.272793515625C23,10.936623515625,21.5926,12.285553515625,19.8571,12.285553515625L19.7484,12.285553515625C18.6258,14.545853515625,16.325499999999998,16.205353515625,13.5711,16.597053515625L13.5711,18.571553515625L15.1428,18.571553515625C16.1906,18.571553515625,16.714199999999998,19.094553515625,16.714199999999998,20.140453515625L16.714199999999998,20.145453515625C16.714199999999998,21.191453515625,16.1906,21.714353515625,15.1428,21.714353515625L8.85707,21.714353515625C7.80924,21.714353515625,7.28564,21.191453515625,7.28564,20.145453515625L7.28564,20.140453515625C7.28564,19.094553515625,7.80925,18.571553515625,8.85707,18.571553515625L10.42822,18.571553515625L10.42822,16.483953515625C7.95518,15.945453515625,5.91645,14.371253515625,4.880599999999999,12.285553515625L4.142860000000001,12.285553515625C2.40674,12.285553515625,1,10.936623515625,1,9.272793515625L1,6.249363515625C1,5.417133515625,1.704,4.742673515625,2.5714300000000003,4.742673515625L4.14307,4.742673515625L4.14307,4.612593515625C4.14307,2.948763515625,5.60638,1.599853515625,7.41164,1.599853515625ZM8.79541,8.131073515625001Q8.79541,8.578653515625,9.11184,8.895403515625Q9.4291,9.213883515625,9.87744,9.213883515625Q10.32577,9.213883515625,10.64198,8.896453515625L12.8521,6.681983515625Q13.1679,6.365413515625,13.1679,5.918193515625Q13.1679,5.470963515625,12.8521,5.154393515624999L12.831,5.133263515625L12.8275,5.130923515625Q12.5178,4.835693515625,12.0856,4.835693515625Q11.6373,4.835693515625,11.3211,5.1531235156249995L9.11174,7.366843515625Q8.79541,7.683493515625,8.79541,8.131073515625001ZM10.3571,12.367353515625Q10.3571,12.814553515625,10.67319,13.131353515625Q10.99048,13.449853515625,11.4388,13.449853515625Q11.8871,13.449853515625,12.2033,13.132453515625L15.5178,9.811633515625Q15.8337,9.495063515624999,15.8337,9.047843515625Q15.8337,8.600623515625,15.5175,8.283733515625L15.5162,8.282473515625Q15.2,7.965353515625,14.752,7.965353515625Q14.3037,7.965353515625,13.9875,8.282773515625L10.67299,11.603553515625Q10.3571,11.920153515625,10.3571,12.367353515625Z" fillRule="evenodd" fill="#B6B7EA" fillOpacity="1"/></g></g></svg>
const SortIcon=({isAscending})=> <svg style={{transform: isAscending?"":"rotate(180deg)"}} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_721_66734"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_721_66734)"><g><path d="M7.66650390625,2.25L14.33317390625,2.25Q14.40704390625,2.25,14.47948390625,2.264411Q14.55193390625,2.278822,14.62018390625,2.30709Q14.68842390625,2.335359,14.74984390625,2.376398Q14.81126390625,2.417437,14.86350390625,2.46967Q14.91573390625,2.521903,14.95677390625,2.583322Q14.99781390625,2.644742,15.026083906250001,2.712987Q15.05434390625,2.781233,15.06876390625,2.853682Q15.08317390625,2.9261315,15.08317390625,3Q15.08317390625,3.0738685,15.06876390625,3.146318Q15.05434390625,3.218767,15.026083906250001,3.287013Q14.99781390625,3.355258,14.95677390625,3.416678Q14.91573390625,3.478097,14.86350390625,3.53033Q14.81126390625,3.582563,14.74984390625,3.623602Q14.68842390625,3.664641,14.62018390625,3.69291Q14.55193390625,3.721178,14.47948390625,3.735589Q14.40704390625,3.75,14.33317390625,3.75L7.66650390625,3.75Q7.59263540625,3.75,7.52018590625,3.735589Q7.44773690625,3.721178,7.37949090625,3.69291Q7.31124590625,3.664641,7.24982590625,3.623602Q7.18840690625,3.582563,7.13617390625,3.53033Q7.08394090625,3.478097,7.04290190625,3.416678Q7.00186290625,3.355258,6.97359390625,3.287013Q6.94532590625,3.218767,6.93091490625,3.146318Q6.91650390625,3.0738685,6.91650390625,3Q6.91650390625,2.9261315,6.93091490625,2.853682Q6.94532590625,2.781233,6.97359390625,2.712987Q7.00186290625,2.644742,7.04290190625,2.583322Q7.08394090625,2.521903,7.13617390625,2.46967Q7.18840690625,2.417437,7.24982590625,2.376398Q7.31124590625,2.335359,7.37949090625,2.30709Q7.44773690625,2.278822,7.52018590625,2.264411Q7.59263540625,2.25,7.66650390625,2.25Z" fillRule="evenodd" fill="currentColor"/></g><g><path d="M4.86350390625,3.196345625Q4.968993906250001,3.090856625,5.026083906249999,2.953028625Q5.08317390625,2.815199625,5.08317390625,2.666015625Q5.08317390625,2.592147125,5.06876390625,2.519697625Q5.054343906250001,2.447248625,5.026083906249999,2.379002625Q4.99781390625,2.310757625,4.95677390625,2.249337625Q4.91573390625,2.187918625,4.86350390625,2.135685625Q4.81126390625,2.083452625,4.74984390625,2.042413625Q4.68842390625,2.001374625,4.62018390625,1.973105625Q4.5519339062499995,1.944837625,4.47948390625,1.930426625Q4.40704390625,1.916015625,4.33317390625,1.916015625Q4.18398390625,1.916015625,4.04615390625,1.973105625Q3.90833390625,2.030196625,3.80284390625,2.135685625L3.80254390625,2.135980625L1.13646890625,4.8020556249999995L1.13617390625,4.802355625000001Q1.0306849062499999,4.907845625,0.97359390625,5.045665625Q0.91650390625,5.183495625,0.91650390625,5.332685625Q0.91650390625,5.406555625,0.93091490625,5.478995625Q0.94532590625,5.5514456249999995,0.97359390625,5.619695625Q1.00186290625,5.687935625,1.04290190625,5.749355625Q1.08394090625,5.810775625,1.13617390625,5.863015625Q1.18840690625,5.915245625,1.24982590625,5.956285625Q1.31124590625,5.997325625,1.37949090625,6.025595624999999Q1.44773690625,6.053855625000001,1.52018590625,6.068275625Q1.5926354062499999,6.082685625,1.66650390625,6.082685625Q1.81568790625,6.082685625,1.95351690625,6.025595624999999Q2.09134490625,5.968505625000001,2.19683390625,5.863015625L2.19712890625,5.862715625L4.86350390625,3.196345625L4.86350390625,3.196345625Z" fillRule="evenodd" fill="currentColor"/></g><g><path d="M3.58349609375,2.666015625Q3.58349609375,2.592147125,3.59790709375,2.519697625Q3.61231809375,2.447248625,3.64058609375,2.379002625Q3.66885509375,2.310757625,3.70989409375,2.249337625Q3.75093309375,2.187918625,3.80316609375,2.135685625Q3.85539909375,2.083452625,3.91681809375,2.042413625Q3.97823809375,2.001374625,4.04648309375,1.973105625Q4.11472909375,1.944837625,4.18717809375,1.930426625Q4.25962759375,1.916015625,4.33349609375,1.916015625Q4.40736459375,1.916015625,4.47981409375,1.930426625Q4.55226309375,1.944837625,4.62050909375,1.973105625Q4.68875409375,2.001374625,4.75017409375,2.042413625Q4.81159309375,2.083452625,4.86382609375,2.135685625Q4.91605909375,2.187918625,4.95709809375,2.249337625Q4.99813709375,2.310757625,5.02640609375,2.379002625Q5.05467409375,2.447248625,5.06908509375,2.519697625Q5.08349609375,2.592147125,5.08349609375,2.666015625L5.08349609375,13.999315625Q5.08349609375,14.073215625,5.06908509375,14.145715625Q5.05467409375,14.218115625,5.02640609375,14.286315625Q4.99813709375,14.354615625,4.95709809375,14.416015625Q4.91605909375,14.477415625,4.86382609375,14.529715625Q4.81159309375,14.581915625,4.75017409375,14.622915625Q4.68875409375,14.664015625,4.62050909375,14.692215625Q4.55226309375,14.720515625,4.47981409375,14.734915625Q4.40736459375,14.749315625,4.33349609375,14.749315625Q4.25962759375,14.749315625,4.18717809375,14.734915625Q4.11472909375,14.720515625,4.04648309375,14.692215625Q3.97823809375,14.664015625,3.91681809375,14.622915625Q3.85539909375,14.581915625,3.80316609375,14.529715625Q3.75093309375,14.477415625,3.70989409375,14.416015625Q3.66885509375,14.354615625,3.64058609375,14.286315625Q3.61231809375,14.218115625,3.59790709375,14.145715625Q3.58349609375,14.073215625,3.58349609375,13.999315625L3.58349609375,2.666015625Z" fillRule="evenodd" fill="currentColor"/></g><g><path d="M7.66650390625,5.583984375L12.99983390625,5.583984375Q13.07370390625,5.583984375,13.14615390625,5.598395375Q13.21860390625,5.612806375,13.28685390625,5.641074375Q13.35509390625,5.669343375,13.41651390625,5.710382375Q13.47793390625,5.751421375,13.53016390625,5.803654375Q13.58240390625,5.855887375,13.62343390625,5.917306375Q13.664473906249999,5.978726375,13.69274390625,6.046971375Q13.72101390625,6.115217375,13.73542390625,6.187666375Q13.74983390625,6.260115875,13.74983390625,6.333984375Q13.74983390625,6.407852875,13.73542390625,6.480302375Q13.72101390625,6.552751375,13.69274390625,6.620997375Q13.664473906249999,6.689242375,13.62343390625,6.750662375Q13.58240390625,6.812081375,13.53016390625,6.864314375Q13.47793390625,6.916547375,13.41651390625,6.957586375Q13.35509390625,6.998625375,13.28685390625,7.026894375Q13.21860390625,7.055162375,13.14615390625,7.069573375Q13.07370390625,7.083984375,12.99983390625,7.083984375L7.66650390625,7.083984375Q7.59263540625,7.083984375,7.52018590625,7.069573375Q7.44773690625,7.055162375,7.37949090625,7.026894375Q7.31124590625,6.998625375,7.24982590625,6.957586375Q7.18840690625,6.916547375,7.13617390625,6.864314375Q7.08394090625,6.812081375,7.04290190625,6.750662375Q7.00186290625,6.689242375,6.97359390625,6.620997375Q6.94532590625,6.552751375,6.93091490625,6.480302375Q6.91650390625,6.407852875,6.91650390625,6.333984375Q6.91650390625,6.260115875,6.93091490625,6.187666375Q6.94532590625,6.115217375,6.97359390625,6.046971375Q7.00186290625,5.978726375,7.04290190625,5.917306375Q7.08394090625,5.855887375,7.13617390625,5.803654375Q7.18840690625,5.751421375,7.24982590625,5.710382375Q7.31124590625,5.669343375,7.37949090625,5.641074375Q7.44773690625,5.612806375,7.52018590625,5.598395375Q7.59263540625,5.583984375,7.66650390625,5.583984375Z" fillRule="evenodd" fill="currentColor"/></g><g><path d="M7.66650390625,8.916015625L11.66650390625,8.916015625Q11.74037390625,8.916015625,11.81282390625,8.930426624999999Q11.88527390625,8.944837625,11.95351390625,8.973105625Q12.021763906250001,9.001374625,12.08318390625,9.042413625Q12.144603906250001,9.083452625,12.19683390625,9.135685625Q12.24906390625,9.187918625,12.29010390625,9.249337625Q12.33114390625,9.310757625,12.359413906250001,9.379002625Q12.38768390625,9.447248625,12.40209390625,9.519697625Q12.41650390625,9.592147125,12.41650390625,9.666015625Q12.41650390625,9.739884125,12.40209390625,9.812333625Q12.38768390625,9.884782625,12.359413906250001,9.953028625Q12.33114390625,10.021273625,12.29010390625,10.082693625Q12.24906390625,10.144112625,12.19683390625,10.196345625Q12.144603906250001,10.248578625,12.08318390625,10.289617625Q12.021763906250001,10.330656625,11.95351390625,10.358925625Q11.88527390625,10.387193625,11.81282390625,10.401604625000001Q11.74037390625,10.416015625,11.66650390625,10.416015625L7.66650390625,10.416015625Q7.59263540625,10.416015625,7.52018590625,10.401604625000001Q7.44773690625,10.387193625,7.37949090625,10.358925625Q7.31124590625,10.330656625,7.24982590625,10.289617625Q7.18840690625,10.248578625,7.13617390625,10.196345625Q7.08394090625,10.144112625,7.04290190625,10.082693625Q7.00186290625,10.021273625,6.97359390625,9.953028625Q6.94532590625,9.884782625,6.93091490625,9.812333625Q6.91650390625,9.739884125,6.91650390625,9.666015625Q6.91650390625,9.592147125,6.93091490625,9.519697625Q6.94532590625,9.447248625,6.97359390625,9.379002625Q7.00186290625,9.310757625,7.04290190625,9.249337625Q7.08394090625,9.187918625,7.13617390625,9.135685625Q7.18840690625,9.083452625,7.24982590625,9.042413625Q7.31124590625,9.001374625,7.37949090625,8.973105625Q7.44773690625,8.944837625,7.52018590625,8.930426624999999Q7.59263540625,8.916015625,7.66650390625,8.916015625Z" fillRule="evenodd" fill="currentColor"/></g><g><path d="M7.66650390625,12.25L10.33317390625,12.25Q10.40704390625,12.25,10.47948390625,12.264410999999999Q10.55193390625,12.278822,10.62018390625,12.30709Q10.68842390625,12.335359,10.74984390625,12.376398Q10.81126390625,12.417437,10.86350390625,12.46967Q10.91573390625,12.521903,10.95677390625,12.583322Q10.99781390625,12.644742,11.02608390625,12.712987Q11.05434390625,12.781233,11.06876390625,12.853682Q11.08317390625,12.9261315,11.08317390625,13Q11.08317390625,13.0738685,11.06876390625,13.146318Q11.05434390625,13.218767,11.02608390625,13.287013Q10.99781390625,13.355258,10.95677390625,13.416678Q10.91573390625,13.478097,10.86350390625,13.53033Q10.81126390625,13.582563,10.74984390625,13.623602Q10.68842390625,13.664641,10.62018390625,13.69291Q10.55193390625,13.721178,10.47948390625,13.735589000000001Q10.40704390625,13.75,10.33317390625,13.75L7.66650390625,13.75Q7.59263540625,13.75,7.52018590625,13.735589000000001Q7.44773690625,13.721178,7.37949090625,13.69291Q7.31124590625,13.664641,7.24982590625,13.623602Q7.18840690625,13.582563,7.13617390625,13.53033Q7.08394090625,13.478097,7.04290190625,13.416678Q7.00186290625,13.355258,6.97359390625,13.287013Q6.94532590625,13.218767,6.93091490625,13.146318Q6.91650390625,13.0738685,6.91650390625,13Q6.91650390625,12.9261315,6.93091490625,12.853682Q6.94532590625,12.781233,6.97359390625,12.712987Q7.00186290625,12.644742,7.04290190625,12.583322Q7.08394090625,12.521903,7.13617390625,12.46967Q7.18840690625,12.417437,7.24982590625,12.376398Q7.31124590625,12.335359,7.37949090625,12.30709Q7.44773690625,12.278822,7.52018590625,12.264410999999999Q7.59263540625,12.25,7.66650390625,12.25Z" fillRule="evenodd" fill="currentColor"/></g></g></svg>
const AppIcon=()=> <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14" height="14" viewBox="0 0 14 14"><defs><clipPath id="master_svg0_228_42520"><rect x="0" y="0" width="14" height="14" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_228_42520)"><g><path d="M5.42795375,6.7450584375L2.36232175,6.7450584375C1.88183575,6.7450584375,1.49609375,6.3593184375,1.49609375,5.8788284375L1.49609375,2.8131984375C1.49609375,2.3394754375,1.8886037500000001,1.9469654375,2.36232175,1.9469654375L5.42795375,1.9469654375C5.90844375,1.9469654375,6.29418375,2.3327074375,6.29418375,2.8131984375L6.29418375,5.8788284375C6.29418375,6.3593184375,5.90844375,6.7450584375,5.42795375,6.7450584375ZM5.42795375,12.5040984375L2.36232175,12.5040984375C1.88183575,12.5040984375,1.49609375,12.1183984375,1.49609375,11.6378984375L1.49609375,8.5722584375C1.49609375,8.0917684375,1.88183575,7.7060284375,2.36232175,7.7060284375L5.42795375,7.7060284375C5.90844375,7.7060284375,6.29418375,8.0917684375,6.29418375,8.5722584375L6.29418375,11.6378984375C6.29418375,12.1115984375,5.90844375,12.5040984375,5.42795375,12.5040984375ZM11.18701375,12.5040984375L8.12138375,12.5040984375C7.64089375,12.5040984375,7.25515375,12.1183984375,7.25515375,11.6378984375L7.25515375,8.5722584375C7.25515375,8.0917684375,7.64089375,7.7060284375,8.12138375,7.7060284375L11.18701375,7.7060284375C11.66749375,7.7060284375,12.05329375,8.0917684375,12.05329375,8.5722584375L12.05329375,11.6378984375C12.05329375,12.1115984375,11.66069375,12.5040984375,11.18701375,12.5040984375ZM12.26299375,3.7403284375L10.25988375,1.7371764375C9.92151375,1.3988059375,9.37335375,1.3988059375,9.03498375,1.7371764375L7.03183375,3.7403284375C6.69346375,4.0786984375,6.69346375,4.6268584375,7.03183375,4.9652284375L9.03498375,6.9683784375C9.37335375,7.3067484375,9.92151375,7.3067484375,10.25988375,6.9683784375L12.26299375,4.9652284375C12.60139375,4.6200884375,12.60139375,4.0719284375,12.26299375,3.7403284375ZM9.82677375,6.0412484375C9.73202375,6.1359884375,9.56960375,6.1359884375,9.47486375,6.0412484375L7.95896375,4.5253484375C7.86422375,4.4306084375,7.86422375,4.2681884375,7.95896375,4.1734384375L9.47486375,2.6575384375C9.56960375,2.5627984374999997,9.73202375,2.5627984374999997,9.82677375,2.6575384375L11.34266375,4.1734384375C11.43741375,4.2681884375,11.43741375,4.4306084375,11.34266375,4.5253484375L9.82677375,6.0412484375Z" fill="currentColor"/></g></g></svg>
const IntelligenceIcon=()=><svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14" height="14" viewBox="0 0 14 14"><defs><clipPath id="master_svg0_228_40372"><rect x="0" y="0" width="14" height="14" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_228_40372)"><g><path d="M8.84917,5.93081L9.52331,7.72197C9.61961,8.00479,9.81222,8.19334,10.101130000000001,8.28761L11.93092,8.94751C12.17168,9.04178,12.31614,9.3246,12.21984,9.56028C12.17168,9.70168,12.07538,9.79596,11.93092,9.84309L10.101130000000001,10.50299C9.81222,10.59727,9.61961,10.78581,9.52331,11.0686L8.84917,12.8127C8.75287,13.0483,8.46396,13.1897,8.223189999999999,13.0955C8.07874,13.0483,7.98243,12.9541,7.93428,12.8127L7.26015,11.0215C7.16384,10.73868,6.97123,10.55013,6.68232,10.45586L4.90069,9.79596C4.65992,9.70168,4.5154700000000005,9.41887,4.61177,9.18319C4.65992,9.04178,4.75623,8.94751,4.90069,8.90037L6.73047,8.24047C7.01939,8.1462,7.212,7.95765,7.3083,7.67484L7.98243,5.88367C8.07874,5.64799,8.367650000000001,5.50658,8.60841,5.60086C8.70472,5.69513,8.801020000000001,5.7894,8.84917,5.93081ZM5.14145,1.122942L5.52667,2.1128C5.57482,2.2542,5.71927,2.39561,5.86373,2.44275L6.87493,2.81984C7.01939,2.8669700000000002,7.11569,3.00838,7.06754,3.14979C7.01939,3.24406,6.97123,3.2912,6.87493,3.33833L5.815580000000001,3.66828C5.67112,3.71542,5.52666,3.85683,5.47851,3.99823L5.09329,4.98809C5.04514,5.1295,4.9006799999999995,5.22377,4.75623,5.17663C4.65992,5.1295,4.61177,5.08236,4.56362,4.98809L4.1784,3.99823C4.13025,3.85683,3.9857899999999997,3.71542,3.84133,3.66828L2.830135,3.29119C2.6856783,3.24406,2.5893733,3.10265,2.6375262,2.96124C2.6856783,2.8669700000000002,2.733831,2.81984,2.830135,2.7727L3.84133,2.39561C3.9857899999999997,2.34848,4.13025,2.20707,4.1784,2.0656600000000003L4.56362,1.075805C4.61177,0.9343975,4.75623,0.8401253,4.9006799999999995,0.8872618C5.04514,0.981534,5.09329,1.02867,5.14145,1.122942Z" fill="currentColor"/></g></g></svg>
const SmallModuleIcon=()=> <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14" height="14" viewBox="0 0 14 14"><defs><clipPath id="master_svg0_228_41378"><rect x="0" y="0" width="14" height="14" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_228_41378)"><g><path d="M6.290859375,13.74637578125C6.485159375,13.85867578125,6.705179375,13.91897578125,6.929609375,13.92137578125C7.154039375,13.91897578125,7.374059375,13.85867578125,7.568359375,13.74637578125L12.485909375,10.93757578125C12.879909375,10.71007578125,13.123209375,10.29007578125,13.124609375,9.83507578125L13.124609375,4.20882578125C13.114409375,3.74460578125,12.853109375,3.32248578125,12.442109375,3.10632578125L7.568359375,0.28882878125C7.173099375,0.06062488125,6.686119375,0.06062488125,6.290859375,0.28882878125L1.425859375,3.10632578125C1.031787375,3.33384578125,0.788480965,3.75379578125,0.787109375,4.20882578125L0.787109375,9.83507578125C0.788428635,10.28787578125,1.027702375,10.70657578125,1.417109375,10.93757578125L6.290859375,13.74637578125ZM3.997759375,5.90196578125Q3.845559375,6.05146578125,3.648119375,6.13222578125Q3.450669375,6.21298578125,3.237339375,6.21298578125Q3.184029375,6.21298578125,3.130979375,6.20775578125Q3.077919375,6.20253578125,3.025629375,6.19212578125Q2.973339375,6.18172578125,2.922329375,6.16624578125Q2.871309375,6.15076578125,2.822049375,6.13036578125Q2.772799375,6.10996578125,2.725779375,6.08482578125Q2.6787593750000003,6.05968578125,2.634439375,6.03006578125Q2.590109375,6.00044578125,2.548899375,5.96661578125Q2.507689375,5.93278578125,2.469989375,5.89508578125Q2.432289375,5.85738578125,2.398469375,5.81616578125Q2.364649375,5.77494578125,2.335029375,5.73061578125Q2.305409375,5.68627578125,2.280279375,5.63925578125Q2.2551493750000002,5.59222578125,2.234739375,5.54296578125Q2.2143393749999998,5.49370578125,2.198869375,5.44267578125Q2.183389375,5.39165578125,2.1729893750000002,5.33935578125Q2.162589375,5.28705578125,2.157359375,5.23399578125Q2.152139375,5.18093578125,2.152139375,5.12761578125Q2.152139375,5.07428578125,2.157359375,5.02122578125Q2.162589375,4.96816578125,2.1729893750000002,4.91586578125Q2.183389375,4.86356578125,2.198869375,4.81254578125Q2.2143393749999998,4.76151578125,2.234739375,4.71225578125Q2.2551493750000002,4.66299578125,2.280279375,4.61596578125Q2.305409375,4.56894578125,2.335029375,4.52460578125Q2.364649375,4.48027578125,2.398469375,4.43905578125Q2.432289375,4.39783578125,2.469989375,4.36013578125Q2.507689375,4.32243578125,2.548899375,4.28860578125Q2.590109375,4.25477578125,2.634439375,4.22515578125Q2.6787593750000003,4.19553578125,2.725779375,4.17039578125Q2.772799375,4.14526578125,2.822049375,4.12485578125Q2.871309375,4.10444578125,2.922329375,4.088975781249999Q2.973339375,4.07349578125,3.025629375,4.06309578125Q3.077919375,4.05268578125,3.130979375,4.047465781250001Q3.184029375,4.04223578125,3.237339375,4.04223578125Q3.341979375,4.04223578125,3.444679375,4.06222578125Q3.547379375,4.08222578125,3.644369375,4.12147578125Q3.741359375,4.16072578125,3.829069375,4.21778578125Q3.916779375,4.27484578125,3.991969375,4.34760578125Q4.067159375,4.42037578125,4.127069375,4.50617578125Q4.186979375,4.59197578125,4.229389375,4.68763578125Q4.2717993750000005,4.78329578125,4.295159375,4.88530578125Q4.318519375,4.98730578125,4.3219593750000005,5.09189578125L6.932629375,6.09905578125L9.538179375,5.07922578125Q9.542799375,4.97550578125,9.566999375,4.87455578125Q9.591199375,4.77359578125,9.634109375,4.67905578125Q9.677019375,4.58452578125,9.737069375,4.49983578125Q9.797129375,4.41515578125,9.872149375,4.34339578125Q9.947179375,4.27163578125,10.034449375,4.21540578125Q10.121719375,4.15917578125,10.218069375,4.12051578125Q10.314429375,4.08185578125,10.416359375,4.06216578125Q10.518289375,4.042475781249999,10.622109375,4.042475781249999Q10.675409375,4.042475781249999,10.728459375,4.04770578125Q10.781499375,4.05292578125,10.833809375,4.0633257812500005Q10.886109375,4.073725781249999,10.937109375,4.08919578125Q10.988109375,4.10467578125,11.037309375,4.12507578125Q11.086609375,4.14546578125,11.133609375,4.17059578125Q11.180609375,4.19572578125,11.224909375,4.22533578125Q11.269209375,4.25494578125,11.310409375,4.28876578125Q11.351609375,4.32257578125,11.389309375,4.36026578125Q11.427009375,4.39795578125,11.460809375,4.43916578125Q11.494609375,4.48036578125,11.524209375,4.52468578125Q11.553909375,4.56900578125,11.579009375,4.61601578125Q11.604109375,4.66302578125,11.624509375,4.71226578125Q11.644909375,4.76151578125,11.660409375,4.81252578125Q11.675909375,4.86352578125,11.686309375,4.91580578125Q11.696709375,4.96808578125,11.701909375,5.02113578125Q11.707109375,5.07417578125,11.707109375,5.12747578125Q11.707109375,5.18078578125,11.701909375,5.23382578125Q11.696709375,5.28687578125,11.686309375,5.33915578125Q11.675909375,5.39143578125,11.660409375,5.44243578125Q11.644909375,5.49344578125,11.624509375,5.54269578125Q11.604109375,5.59193578125,11.579009375,5.63894578125Q11.553909375,5.68595578125,11.524209375,5.73027578125Q11.494609375,5.77459578125,11.460809375,5.81579578125Q11.427009375,5.85699578125,11.389309375,5.89469578125Q11.351609375,5.93238578125,11.310409375,5.96619578125Q11.269209375,6.00001578125,11.224909375,6.02962578125Q11.180609375,6.05923578125,11.133609375,6.08436578125Q11.086609375,6.10949578125,11.037309375,6.12988578125Q10.988109375,6.15028578125,10.937109375,6.16575578125Q10.886109375,6.18123578125,10.833809375,6.19163578125Q10.781499375,6.20203578125,10.728459375,6.20725578125Q10.675409375,6.21247578125,10.622109375,6.21247578125Q10.402589375,6.21247578125,10.200329375,6.12714578125Q9.998079375,6.04180578125,9.844899375,5.88455578125L7.306639375,6.90472578125L7.306639375,10.25997578125Q7.388869375,10.28577578125,7.466019375,10.32417578125Q7.543159375,10.36257578125,7.613279375,10.41267578125Q7.683399375,10.46277578125,7.744739375,10.52327578125Q7.806079375,10.58377578125,7.857099375,10.65327578125Q7.908129375,10.72267578125,7.947559375,10.79937578125Q7.986989375,10.87597578125,8.013839375,10.95787578125Q8.040689375,11.03977578125,8.054279375,11.12487578125Q8.067879375,11.20997578125,8.067879375,11.29617578125Q8.067879375,11.34957578125,8.062649375,11.40257578125Q8.057419375,11.45567578125,8.047019375,11.50797578125Q8.036619375,11.56037578125,8.021139375,11.61137578125Q8.005659375,11.66237578125,7.985249375,11.71167578125Q7.964849375,11.76097578125,7.939709375,11.80797578125Q7.914569375,11.85507578125,7.884949375,11.89937578125Q7.855329375,11.94377578125,7.821499375,11.98497578125Q7.787669375,12.02617578125,7.749959375,12.06397578125Q7.712259375,12.10167578125,7.671039375,12.13547578125Q7.629819375,12.16937578125,7.585479375,12.19897578125Q7.541149375,12.22857578125,7.494119375,12.25377578125Q7.447089375,12.27887578125,7.397829375,12.29927578125Q7.348569375,12.31967578125,7.297539375,12.33517578125Q7.246509375,12.35067578125,7.194209375,12.36107578125Q7.141919375,12.37147578125,7.088849375,12.37667578125Q7.035779375,12.38197578125,6.982459375,12.38197578125Q6.929139375,12.38197578125,6.876069375,12.37667578125Q6.823009375,12.37147578125,6.770709375,12.36107578125Q6.718409375,12.35067578125,6.667379375,12.33517578125Q6.616359375,12.31967578125,6.567089375,12.29927578125Q6.517829375,12.27887578125,6.470799375,12.25377578125Q6.423769375,12.22857578125,6.379439375,12.19897578125Q6.335099375,12.16937578125,6.293879375,12.13547578125Q6.252659375,12.10167578125,6.214959375,12.06397578125Q6.177249375,12.02617578125,6.143429375,11.98497578125Q6.109599375,11.94377578125,6.079969375,11.89937578125Q6.050349375,11.85507578125,6.025209375,11.80797578125Q6.000079375,11.76097578125,5.979669375,11.71167578125Q5.959259375,11.66237578125,5.943789375,11.61137578125Q5.928309375,11.56037578125,5.917899375,11.50797578125Q5.907499375,11.45567578125,5.902269375,11.40257578125Q5.897049375,11.34957578125,5.897049375,11.29617578125Q5.897049375,11.15447578125,5.933429375,11.01747578125Q5.969809375,10.88047578125,6.040129375,10.75737578125Q6.110449375,10.63437578125,6.209989375,10.53347578125Q6.309539375,10.43257578125,6.431639375,10.36067578125L6.431639375,6.89652578125L3.997759375,5.90196578125Z" fillRule="evenodd" fill="currentColor"/></g></g></svg>
const goLeft = (e) => {
    let node = e.currentTarget.parentNode.parentNode;
    scroll("left",node,170,20);
};

const goRight = (e) =>{
    let node = e.currentTarget.parentNode.parentNode;
    scroll("right",node,170,20);
};

const scroll = (type,node,value,interval) => {
    let num = 0;
    let timer = setInterval(function () {
        if(type === "left"){
            node.scrollLeft = node.scrollLeft - interval;
        }else{
            node.scrollLeft = node.scrollLeft + interval;
        }
        num += interval;
        if(num>=value){
            clearInterval(timer);
        }
    },50);
};

const App = () => {
    const [selectFolder, setSelectFolder] = useState({ id: "" });
    const [selectChildrenFolder, setSelectChildrenFolder] = useState({ id: "" });
    const [searchName, setSearchName] = useState("");
    const [isAscending, setIsAscending] = useState(true);
    const [waxberryList, setWaxberryList] = useState([]);
    const [agentMenuList, setAgentMenuList] = useState([]);
    const [waxberryType,setWaxberryType] =useState(0)
    const {t} =useTranslation()
    useEffect(() => {
        getAgentMenuList();
    }, []);

    useEffect(() => {
        const handleScroll = (e) => {
            const node = e.target;
            const left = Math.ceil(node.scrollLeft);
            if (left <= 0) {
                $(node).find(".icon-left").hide();
                $(node).find(".icon-right").show();
                return;
            }
            if (left > 0) {
                $(node).find(".icon-left").show();
            }
            if (left >= node.scrollWidth - node.clientWidth) {
                $(node).find(".icon-right").hide();
            } else {
                $(node).find(".icon-right").show();
            }
        };

        $(".scroll-container").on('scroll', handleScroll);
        return () => {
            $(".scroll-container").off('scroll', handleScroll);
        };
    }, []);

    useEffect(() => {
        getWaxberryList();
    }, [selectFolder,selectChildrenFolder,searchName,isAscending]);

    const getWaxberryList = () => {
        const groupId = selectChildrenFolder.id || selectFolder.id;
        axios.get(`${globalInitConfig.REACT_APP_API_BASE_URL}mgr/agent/agent/findByStatusAndGroupId?name=${searchName}&groupId=${groupId}&isAscending=${isAscending}&pageNo=0&pageSize=1000`).then(res => {
            if (res.data.code === 200) {
                setWaxberryList(res.data.data.content);
            }
        });
    };

    const getAgentMenuList = () => {
        axios.get(`${globalInitConfig.REACT_APP_API_BASE_URL}mgr/agent/agentClassification/findAllAgentClassification`).then(res => {
            if (res.data.code === 200) {
                setAgentMenuList(res.data.data);
            }
        });
    };

    const groupChange = (obj) => {
        setSelectFolder(obj);
        setSelectChildrenFolder({ id: "" });
    };

    const childrenGroupChange = (obj) => {
        setSelectChildrenFolder(obj);
    };

    const searchChange = (e) => {
        setSearchName(e.target.value);
    };

    const ascendChange = () => {
        setIsAscending(prev => !prev);
    };

    const goDetailView = (id) => {
        window.open(`/waxberry_detail?id=${id}`, "_self");
    };

    const run = (item) => {
        axios.get(`${globalInitConfig.REACT_APP_API_BASE_URL}mgr/agent/agent/agentRunRecord?vesselId=${item.vesselId}`).then(res => {
            if (res.data.code === 200) {
                item.runCount += 1;
                setWaxberryList([...waxberryList]);
            }
        });

        if (item.type === 0) {
            window.open(globalInitConfig.REACT_APP_RUN_URL.replace('ID',item.id.toLowerCase()));
        } else if (item.type === 1) {
            window.open(`/agent_run?id=${item.id}`);
        }
    };

    const like = (waxberryObj) => {
        axios.get(`${globalInitConfig.REACT_APP_API_BASE_URL}mgr/agent/agent/saveAgentLike?id=${waxberryObj.id}`).then(res => {
            if (res.data.code === 200) {
                getWaxberryList();
            } else {
                message.error(res.data.message);
            }
        });
    };

    const star = (waxberryObj) => {
        axios.get(`${globalInitConfig.REACT_APP_API_BASE_URL}mgr/agent/agent/saveAgentCollect?id=${waxberryObj.id}`).then(res => {
            if (res.data.code === 200) {
                getWaxberryList();
            } else {
                message.error(res.data.message);
            }
        });
    };
    const waxberryTypeChange=(type)=>{
        setWaxberryType(type)
    }
    const iconMap=[
        {
            name: t('app'),
            icon: <AppIcon/>,
        },
        {
            name: t('agent'),
            icon: <IntelligenceIcon/>
        },
        {
            name: t('smallModel'),
            icon: <SmallModuleIcon/>
        },
        {
            name: t('largeModel'),
            icon:LargeModelPng
        }
    ];

    const getGroupImg = (name) => {
        if(name === "钢铁行业") return <img src={steelSvg}/>;
        if(name === "轻工行业") return <img src={lightIndustrySvg}/>;
        if(name === "有色行业") return <img src={nonferrousSvg}/>;
        if(name === "电子行业") return <img src={electronSvg}/>;
        if(name === "石化行业") return <img src={petrifactionSvg}/>;
        if(name === "汽车行业") return <img src={carSvg}/>;
        if(name === "化工行业") return <img src={chemicalIndustrySvg}/>;
        if(name === "建材行业") return <img src={buildingMaterialsSvg}/>;
        if(name === "电力行业") return <img src={powerSvg}/>;
        if(name === "机械行业") return <img src={machinerySvg}/>;
    };
    return (
        <div className="app-content-right right_bj">
            {/* <div className="content-header">
                            <div style={{display:'flex',marginRight:8}}><svg  version="1.1" width="24" height="24" viewBox="0 0 18 18"><defs><clipPath id="master_svg0_280_29827/385_77512"><rect x="0" y="0" width="18" height="18" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_280_29827/385_77512)"><g><path d="M8.99999875,0.8555145263671875C13.49806875,0.8555145263671875,17.14456875,4.502024526367188,17.14456875,9.000044526367187C17.14456875,13.498114526367187,13.49806875,17.14461452636719,8.99999875,17.14461452636719C4.50197875,17.14461452636719,0.85546875,13.498114526367187,0.85546875,9.000044526367187C0.85546875,4.502024526367188,4.50197875,0.8555145263671875,8.99999875,0.8555145263671875ZM11.84736875,5.110424526367187L7.70501875,6.601684526367188C7.19113875,6.786734526367187,6.78658875,7.191354526367188,6.60163875,7.705264526367188L5.11037875,11.847414526367187C5.00341875,12.144214526367188,5.07757875,12.476214526367187,5.30071875,12.699314526367187C5.52384875,12.922514526367188,5.85578875,12.996614526367187,6.15266875,12.889714526367188L10.29497875,11.398414526367187C10.80885875,11.213314526367187,11.21336875,10.808734526367187,11.39836875,10.294824526367188L12.88966875,6.152714526367188C12.99656875,5.855834526367188,12.92246875,5.5238945263671875,12.69926875,5.300754526367188C12.47616875,5.077624526367187,12.14416875,5.003464526367187,11.84736875,5.110424526367187ZM8.99999875,10.018114526367187C9.56225875,10.018114526367187,10.01806875,9.562304526367187,10.01806875,9.000044526367187C10.01806875,8.437784526367189,9.56225875,7.981984526367188,8.99999875,7.981974526367187C8.437738750000001,7.981984526367188,7.98193875,8.437784526367189,7.98193875,9.000044526367187C7.98193875,9.562304526367187,8.437738750000001,10.018114526367187,8.99999875,10.018114526367187Z" fill="currentColor" /></g></g></svg></div>
                            {t('menu.waxberryPlaza')}
                        </div> */}
            <div className="content-data-tool">
                <div className="waxberry-type">
                    <div className={waxberryType===0?"type type-active":"type"} onClick={()=>waxberryTypeChange(0)}><MarketIcon width={24} height={24}/>{t('menu.waxberryPlaza')}</div>
                    {/*<div className={waxberryType===1?"type type-active":"type"} onClick={()=>waxberryTypeChange(1)}><TrophyIcon width={24} height={24}/>{t('waxberryPlaza.rankingList')}</div>*/}
                </div>

            </div>
            {
                waxberryType===0&&<>
                    <div className="content-tool">
                        <div className="tool-left">
                            <div className="scroll-container">
                                <div className="icon-left">
                                    <svg onClick={goLeft} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14.876254081726074" height="16" viewBox="0 0 14.876254081726074 16"><defs><clipPath id="master_svg0_514_023575"><rect x="14.876254081726074" y="0" width="14.876254081726074" height="16" rx="0"/></clipPath></defs><g transform="matrix(-1,0,0,1,29.75250816345215,0)" clipPath="url(#master_svg0_514_023575)"><g><path d="M26.844284081726073,8.19735C26.853524081726075,8.17973,26.868494081726073,8.16498,26.876584081726072,8.14679C27.035194081726075,7.82189,26.983264081726077,7.42433,26.702424081726075,7.16303L20.336044081726072,1.232787C19.988854081726075,0.9096019,19.441570081726073,0.9249292,19.112824081726075,1.266312C18.784666481726074,1.608244,18.799671581726074,2.14723,19.146864081726076,2.471L24.859254081726075,7.79295L19.169341081726074,13.1938C18.825620581726074,13.5204,18.815234881726074,14.0594,19.146864081726076,14.3985C19.316415081726074,14.5723,19.543071081726076,14.6593,19.769728081726075,14.6593C19.985994081726073,14.6593,20.202274081726074,14.5797,20.370084081726073,14.4207L26.678794081726075,8.43251C26.690914081726074,8.42057,26.695504081726074,8.40411,26.707634081726074,8.39162C26.716864081726072,8.38311,26.726664081726074,8.376850000000001,26.735874081726074,8.36778C26.784884081726073,8.31719,26.810834081726075,8.25527,26.844284081726073,8.19735Z" fill="currentColor"/></g></g></svg>
                                </div>
                                <div className="icon-right">
                                    <svg onClick={goRight} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_514_022195"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_514_022195)"><g><path d="M11.968029999999999,8.19735C11.97727,8.17973,11.992239999999999,8.16498,12.00033,8.14679C12.15894,7.82189,12.10701,7.42433,11.826170000000001,7.16303L5.45979,1.232787C5.1126000000000005,0.9096019,4.565316,0.9249292,4.23657,1.266312C3.9084124,1.608244,3.9234175000000002,2.14723,4.27061,2.471L9.983,7.79295L4.293087,13.1938C3.9493665,13.5204,3.9389808,14.0594,4.27061,14.3985C4.440161,14.5723,4.666817,14.6593,4.893474,14.6593C5.10974,14.6593,5.32602,14.5797,5.49383,14.4207L11.80254,8.43251C11.81466,8.42057,11.81925,8.40411,11.83138,8.39162C11.84061,8.38311,11.85041,8.376850000000001,11.85962,8.36778C11.908629999999999,8.31719,11.93458,8.25527,11.968029999999999,8.19735Z" fill="currentColor" /></g></g></svg>
                                </div>
                                <div className={selectFolder.id===""?"type-item type-item-active":"type-item"} onClick={()=>groupChange({id:""})}>
                                    <img src={AllTypeSvg}/><span className="type">{t('all')}</span>
                                </div>
                                {agentMenuList.map(item=>(
                                    <div key={item.id} className={selectFolder.id===item.id?"type-item type-item-active":"type-item"} onClick={()=>groupChange(item)}>
                                        {getGroupImg(item.name)}<span className="type">{item.name}</span>
                                    </div>
                                ))}
                            </div>
                        </div>
                        <div className="tool-right">
                            <div className="search">
                                <SearchOutlined/>
                                <Input placeholder={t('waxberryPlaza.searchWaxberry')} value={searchName} onChange={searchChange}/>
                            </div>
                            <div className="sorted" onClick={ascendChange}>
                                <SortIcon isAscending={isAscending}/>
                            </div>
                        </div>
                    </div>
                    {selectFolder.children && <div className="content-tool-children">
                        <div className={selectChildrenFolder.id===""?"type-item type-item-active":"type-item"} onClick={()=>childrenGroupChange({id:""})}>全部</div>
                        {selectFolder.children.map(item=>(
                            <div key={item.id} className={selectChildrenFolder.id===item.id?"type-item type-item-active":"type-item"} onClick={()=>childrenGroupChange(item)}>{item.name}</div>
                        ))}
                    </div>}
                    <div className="content-data">
                        {waxberryList.map(item=>(
                            <div className="card" key={item.id}>
                                {item.ismodify === 0 && <span className="custom">{t('waxberryPlaza.customizable')}</span>}
                                <img onClick={()=>goDetailView(item.id)} src={item.coverFileId ? `${globalInitConfig.REACT_APP_API_FS_URL}file/download/${item.coverFileId}` : CardDefaultPng} width="324" height="180"/>
                                <div className="card-title">
                                    <div className="label">
                                        <div className="labelName">{item.name}</div>
                                        <div
                                            className="typeFrame"
                                        >

                                            {iconMap[item.type].icon}
                                            {iconMap[item.type].name}
                                        </div>
                                    </div>
                                    <div className="user">
                                        <img src={item.avatarUrl ? `${globalInitConfig.REACT_APP_API_FS_URL}file/download/${item.avatarUrl}` : CardDefaultPng1} width={20} height={20}/>
                                        {item.creatorName}
                                    </div>
                                </div>
                                <div className="card-desc">{t('waxberryForm.introduction')}：{item.discription}</div>
                                <div className="card-tags">
                                    {item.agentLabel && item.agentLabel.split(",").map(label=>(
                                        <span className="tag" key={label}>{label}</span>
                                    ))}
                                </div>
                                <div className="card-footer">
                                    <div className="data">
                                        <div className="data-div">
                                            {item.isLike === 0 ?
                                                <svg onClick={()=>like(item)} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><defs><clipPath id="master_svg0_41_9670"><rect x="0" y="0" width="24" height="24" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_41_9670)"><g><path d="M12.15,3.49899C14.789,1.605491,18.4285,1.8724910000000001,20.778,4.24899C22.0405,5.52699,22.75,7.26899,22.75,9.085989999999999C22.75,10.90299,22.04,12.645,20.779,13.922L13.8785,20.942C13.3886,21.4569,12.7092,21.7488,11.9985,21.75C11.2911,21.7494,10.61456,21.4601,10.1255,20.949L3.2184999999999997,13.9165C1.9585,12.6385,1.25,10.89799,1.25,9.082989999999999C1.25,7.26799,1.9585,5.52699,3.2190000000000003,4.24849C5.568,1.87249,9.208,1.60549,11.847,3.49899L11.998,3.61099L12.15,3.49899ZM19.711,5.302989999999999C17.7275,3.29699,14.5745,3.2254899999999997,12.508,5.13999L11.998,5.6119900000000005L11.489,5.13999C9.422,3.2254899999999997,6.269,3.29699,4.2865,5.302490000000001C3.304,6.29849,2.75,7.66049,2.75,9.08249C2.75,10.50499,3.304,11.86699,4.2875,12.864L11.2025,19.905C11.4145,20.1265,11.701,20.25,11.9985,20.25C12.296,20.25,12.5825,20.1265,12.8015,19.8975L19.71,12.869C20.6945,11.87299,21.2495,10.50999,21.2495,9.085989999999999C21.2495,7.66249,20.6945,6.29899,19.7105,5.302989999999999L19.711,5.302989999999999Z" fill="currentColor"/></g></g></svg> :
                                                <svg onClick={()=>like(item)} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><defs><clipPath id="master_svg0_140_80743"><rect x="0" y="0" width="24" height="24" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_140_80743)"><g><path d="M12.146459375,3.7016818750000002C14.722659375,1.853251875,18.275459375,2.113897875,20.569059375,4.433831875C21.801559375,5.681421875,22.494159375,7.381951875,22.494159375,9.155711875C22.494159375,10.929461875,21.801059375,12.630021875,20.570059375,13.876621875L13.833759375,20.729521875C13.355459375,21.232121875,12.692359375,21.517121875,11.998559375,21.518321875C11.307959375,21.517721875,10.647529375,21.235321875,10.170119375,20.736321875L3.427509375,13.871221875C2.197496375,12.623621875,1.505859375,10.924581875,1.505859375,9.152781874999999C1.505859375,7.380981875,2.197496375,5.681411875,3.4279993749999997,4.433341875C5.721089375,2.113896875,9.274449375,1.853251875,11.850659375,3.7016818750000002L11.998059375,3.811021875L12.146459375,3.7016818750000002Z" fill="#F76965"/></g></g></svg>
                                            }
                                            <span>{item.likeCount}</span>
                                        </div>
                                        <div className="data-div">
                                            {item.isCollect === 0 ?
                                                <svg onClick={()=>star(item)} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><defs><clipPath id="master_svg0_41_15071"><rect x="0" y="0" width="24" height="24" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_41_15071)"><g><path d="M22.1820734375,9.5435434375C22.0951734375,9.2844034375,21.8710734375,9.094623437500001,21.6002734375,9.0530034375L15.4334734375,8.1011134375L12.6777734375,2.2014764375C12.5580734375,1.9452574375,12.3011734375,1.7810169455,12.0178734375,1.7802734375Q12.0171734375,1.7802734375,12.0164734375,1.7802734375C11.7346934375,1.7802734375,11.4777334375,1.9430514375,11.3565734375,2.1985494375L8.572943437500001,8.0920034375L2.3873734375,9.0179634375C2.1201944375,9.0639434375,1.9004794375,9.2537534375,1.8165365375,9.5114334375C1.7318499375,9.7683934375,1.7982850375,10.0516134375,1.9866294375,10.2457934375L6.4679434375,14.8555734375L5.398533437499999,21.3508734375C5.3532734375,21.6260734375,5.4693334375,21.9041734375,5.6978234375,22.0655734375C5.9255734375,22.2268734375,6.2263334375,22.2443734375,6.4708634375,22.1093734375L11.9872734375,19.0748734375L17.4919734375,22.1282734375C17.6022734375,22.1896734375,17.7241734375,22.2202734375,17.8460734375,22.2202734375C17.9934734375,22.2202734375,18.1402734375,22.1764734375,18.2650734375,22.0866734375C18.4934734375,21.9260734375,18.6110734375,21.6486734375,18.5664734375,21.3727734375L17.5189734375,14.8745734375L22.0112734375,10.2844534375C22.2017734375,10.0895634375,22.2681734375,9.8026934375,22.1820734375,9.5435434375ZM16.2181734375,14.1175734375C16.056873437500002,14.2825734375,15.9823734375,14.5153734375,16.0195734375,14.7438734375L16.8867734375,20.1222734375L12.3434734375,17.602473437500002C12.1244734375,17.4797734375,11.8572734375,17.4797734375,11.6375934375,17.600973437500002L7.0840134375,20.1062734375L7.9694734375,14.7299734375C8.006693437500001,14.5022734375,7.9337134375,14.2693734375,7.7723734375,14.1029734375L4.0006134375,10.2231534375L9.1605234375,9.4804934375C9.2119034375,9.4716234375,9.2610434375,9.457513437500001,9.3075934375,9.4389734375C9.4874734375,9.3773134375,9.6432434375,9.2460034375,9.7309034375,9.0603034375L12.0135734375,4.2278634375L14.2764734375,9.0726934375C14.3800734375,9.2931534375,14.5859734375,9.447903437499999,14.8268734375,9.4851234375L19.9745734375,10.2793434375L16.2181734375,14.1175734375Z" fill="currentColor"/></g></g></svg> :
                                                <svg onClick={()=>star(item)} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><defs><clipPath id="master_svg0_140_80750"><rect x="0" y="0" width="24" height="24" rx="0"/></clipPath></defs><g clipPath="url(#master_svg0_140_80750)"><g><path d="M22.1820734375,9.5435434375C22.0951734375,9.2844034375,21.8710734375,9.094623437500001,21.6002734375,9.0530034375L15.4334734375,8.1011134375L12.6777734375,2.2014764375C12.5580734375,1.9452574375,12.3011734375,1.7810169455,12.0178734375,1.7802734375Q12.0171734375,1.7802734375,12.0164734375,1.7802734375C11.7346934375,1.7802734375,11.4777334375,1.9430514375,11.3565734375,2.1985494375L8.572943437500001,8.0920034375L2.3873734375,9.0179634375C2.1201944375,9.0639434375,1.9004794375,9.2537534375,1.8165365375,9.5114334375C1.7318499375,9.7683934375,1.7982850375,10.0516134375,1.9866294375,10.2457934375L6.4679434375,14.8555734375L5.398533437499999,21.3508734375C5.3532734375,21.6260734375,5.4693334375,21.9041734375,5.6978234375,22.0655734375C5.9255734375,22.2268734375,6.2263334375,22.2443734375,6.4708634375,22.1093734375L11.9872734375,19.0748734375L17.4919734375,22.1282734375C17.6022734375,22.1896734375,17.7241734375,22.2202734375,17.8460734375,22.2202734375C17.9934734375,22.2202734375,18.1402734375,22.1764734375,18.2650734375,22.0866734375C18.4934734375,21.9260734375,18.6110734375,21.6486734375,18.5664734375,21.3727734375L17.5189734375,14.8745734375L22.0112734375,10.2844534375C22.2017734375,10.0895634375,22.2681734375,9.8026934375,22.1820734375,9.5435434375Z" fill="#FFCD44"/></g></g></svg>
                                            }
                                            <span>{item.collectCount}</span>
                                        </div>
                                    </div>
                                    <div className="runDiv">
                                        <div className="run" onClick={()=>run(item)}><img src={RunSvg}/>{t('run')}</div>
                                        <div className="count">{item.runCount || 0}</div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </>
            }
            {waxberryType===1&&<RankingList/>}


        </div>
    );
}

export default App;
